<template>
  <div class="content">
    <div class="form-container">
      <el-row style="padding: 10px">
        <el-form :inline="true" :model="searFrom">
          <el-form-item>
            <el-input
              v-model="searFrom.name"
              placeholder="IP地址"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searFrom.code"
              placeholder="产品标签"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searFrom.account"
              placeholder="账户"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searFrom.reportReason"
              placeholder="报告原因"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searFrom.reportTime"
              type="datetime"
              placeholder="报告时间"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reportVis = true"
              >报告问题</el-button
            >
          </el-form-item>
          <el-form-item v-if="hasSelection">
            <el-button type="primary" @click="moveToRecycleBin"
              >放入回收站</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
      max-height="500"
      @selection-change="handleSelectionChange"
      height="450"
    >
      <el-table-column type="expand">
        <template #default="{ row }">
          <el-table :data="row.ips" style="width: 100%">
            <el-table-column type="selection" prop="id" label="订单ID" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="country" label="国家" />
            <el-table-column prop="ip" label="涉及IP">
              <template #default="scope">
                {{ scope.row.ip }}
                <el-button @click="openTestDialog(scope.row.ip)"
                  >测试</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="是否移除IP">
              <el-table-column
                prop="removeSingleIp"
                label="是否移除单个ip（对于这单一产品下的ip）"
                width="120"
              >
                <template #default="{ row }">
                  <el-select v-model="row.removeSingleIp" placeholder="请选择">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="removeSingleIpTag"
                label="是否移除单个ip（此类产品标签）"
                width="120"
              >
                <template #default="{ row }">
                  <el-select
                    v-model="row.removeSingleIpTag"
                    placeholder="请选择"
                  >
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="removeIpSegment"
                label="是否移除相应的整段ip(此类产品标签"
                width="120"
              >
                <template #default="{ row }">
                  <el-select v-model="row.removeIpSegment" placeholder="请选择">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table-column>

            <el-table-column prop="reportReason" label="报告原因" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column prop="ip" label="涉及IP" /> -->
      <!-- <el-table-column prop="productTag" label="涉及产品标签" /> -->
      <el-table-column prop="account" label="报告账户" />
      <el-table-column
        prop="currentProductStatus"
        label="此账户当前持有产品情况"
      />
      <el-table-column prop="createTime" label="时间" width="120">
      </el-table-column>

      <el-table-column prop="solution" label="解决方式" width="170">
        <template #default="{ row }">
          <el-button type="primary" @click="openSolutionDialog(row)"
            >选择解决方式</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="聊天">
        <template #default="{ row }">
          <el-button type="primary" @click="openChat(row)">聊天</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="icon_content">
            <!-- <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <div class="icon_box">
                <el-icon @click="edit(row)" size="20" color="#71778d"
                  ><EditPen
                /></el-icon>
              </div>
            </el-tooltip> -->
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <div class="icon_box_d">
                <el-icon @click="removeRow(row)" size="20" color="#71778d"
                  ><Remove
                /></el-icon>
              </div>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="放入维修站"
              placement="top-start"
            >
              <div class="icon_box">
                <el-icon
                  @click="moveToRepairStation(row)"
                  size="20"
                  color="#71778d"
                  ><Select
                /></el-icon>
              </div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination
        v-model:current-page="searFrom.pageNo"
        v-model:page-size="searFrom.pageSize"
        :page-sizes="[10, 50, 100, 150]"
        :small="small"
        :disabled="false"
        :background="true"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 报告对话框 -->
    <el-dialog v-model="reportVis" title="用户反馈" width="70%">
      <el-form label-position="left" label-width="200px" :model="objectForm">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="涉及IP">
              <el-input v-model="objectForm.ip" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="国家">
              <el-select
                v-model="objectForm.country"
                placeholder="请选择国家"
                clearable
              >
                <el-option label="中国" value="中国"></el-option>
                <el-option label="美国" value="美国"></el-option>
                <!-- 根据需要添加更多选项 -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地区">
              <el-select
                v-model="objectForm.region"
                placeholder="请选择地区"
                clearable
              >
                <el-option label="华北" value="华北"></el-option>
                <el-option label="东北" value="东北"></el-option>
                <!-- 根据需要添加更多选项 -->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="涉及产品标签">
              <el-select
                v-model="objectForm.productTag"
                placeholder="请选择产品标签"
                multiple
                clearable
              >
                <el-option label="标签A" value="标签A"></el-option>
                <el-option label="标签B" value="标签B"></el-option>
                <!-- 根据需要添加更多选项 -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="价格">
              <el-input
                v-model="objectForm.price"
                placeholder="请输入价格"
                :disabled="!objectForm.productTag"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="报告原因">
              <el-input v-model="objectForm.reportReason" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input v-model="objectForm.notes" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reportVis = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 解决方案对话框 -->
    <el-dialog v-model="solutionDialogVisible" title="选择解决方式" width="80%">
      <el-radio-group style="width: 100%; text-align: left" v-model="radio1">
        <el-row style="width: 100%">
          <el-col :span="8">
            <el-radio :label="1">显示涉及问题节点</el-radio>
          </el-col>
          <el-col :span="8">
            <el-radio :label="2">显示涉及IP</el-radio>
          </el-col>
          <el-col :span="8">
            <el-radio :label="3">已操作详情</el-radio>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col :span="8">
            <el-radio :label="4">更换节点</el-radio>
          </el-col>
          <el-col :span="8">
            <el-radio label="5"
              >更换IP
              <el-button>自动更换</el-button>
              <el-button @click="nextStepv = true">手动更换</el-button>
            </el-radio>
          </el-col>
        </el-row>

        <el-row style="width: 100%">
          <el-col :span="8">
            <el-radio :label="6">退款到余额</el-radio>
          </el-col>
          <el-col :span="8">
            <el-radio label="7">款项原路返回</el-radio>
          </el-col>
          <el-col :span="8">
            <el-radio label="8">不做任何操作 </el-radio>
          </el-col>
        </el-row>

        <el-row style="width: 100%">
          <el-col :span="8">
            <el-radio :label="9"
              >是否移除单个ip（对于这单一产品下的ip）</el-radio
            >
          </el-col>
          <el-col :span="8">
            <el-radio label="10">是否移除单个ip（此类产品标签）</el-radio>
          </el-col>
          <el-col :span="8">
            <el-radio label="11">是否移除相应的整段ip(此类产品标签 </el-radio>
          </el-col>
        </el-row>
      </el-radio-group>
      <hr />
      <el-row>
        <div>
          <label style="margin-right: 20px">订单选择</label>
          <el-radio-group v-model="selectedOrder">
            <el-radio label="分段" value="true"></el-radio>
            <el-radio label="展开" value="false"></el-radio>
          </el-radio-group>
        </div>
      </el-row>
      <el-table
        :data="orderData"
        style="width: 100%"
        max-height="500"
        row-key="id"
      >
        <el-table-column type="selection" prop="id" label="订单id" />
        <el-table-column prop="productName" label="产品名称" />
        <el-table-column prop="country" label="国家" />
        <el-table-column label="涉及IP">
          <template #default="scope">
            {{ scope.row.ip }}
            <el-button @click="openTestDialog(scope.row.ip)">测试</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="reportReason" label="报告原因" />
      </el-table>

      <el-tabs v-model="activeTab" v-if="false">
        <el-tab-pane label="显示涉及问题节点">
          <el-radio-group v-model="selectedNode">
            <el-radio label="退款到余额" @click="showIpPool = false"
              >退款到余额</el-radio
            >
            <el-radio label="款项原路返回" @click="showIpPool = false"
              >款项原路返回</el-radio
            >
            <el-radio label="不做任何操作" @click="showIpPool = false"
              >不做任何操作</el-radio
            >
          </el-radio-group>

          <el-row style="padding: 10px">
            <el-form :inline="true" :model="searFromNode">
              <el-form-item>
                <el-input placeholder="国家" style="width: 200px" clearable />
              </el-form-item>
              <el-form-item>
                <el-input
                  placeholder="产品名称"
                  style="width: 200px"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-input placeholder="订单id" style="width: 200px" clearable />
              </el-form-item>
              <el-form-item>
                <el-input placeholder="涉及ip" style="width: 200px" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="init">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="reportVis = true"
                  >同步</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary">修改节点</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-radio-group v-model="selectedOrder">
              <el-radio label="分段" value="true"></el-radio>
              <el-radio label="展开" value="false"></el-radio>
            </el-radio-group>
          </el-row>

          <el-table :data="tableDataNode" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="orderId" label="订单ID" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="country" label="国家" />
            <el-table-column prop="ip" label="涉及IP" />
            <el-table-column prop="nodeGroup" label="指定节点或节点组" />
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button @click="editNode(row)">编辑</el-button>
                <el-button @click="removeNode(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="显示涉及IP">
          <el-radio-group v-model="selectedOrder">
            <el-radio label="更换IP" @click="solution"
              >更换IP
              <el-button @click="solution">自动更换</el-button>
              <el-button @click="solution">手动更换</el-button>
            </el-radio>
            <el-radio label="退款到余额" @click="showIpPool = false"
              >退款到余额</el-radio
            >
            <el-radio label="款项原路返回" @click="showIpPool = false"
              >款项原路返回</el-radio
            >
            <el-radio label="不做任何操作" @click="showIpPool = false"
              >不做任何操作</el-radio
            ><br />
            <el-radio
              label="是否移除单个ip（对于这单一产品下的ip）"
              @click="showIpPool = false"
              >是否移除单个ip（对于这单一产品下的ip）</el-radio
            >
            <el-radio
              label="是否移除单个ip（此类产品标签）"
              @click="showIpPool = false"
              >是否移除单个ip（此类产品标签）</el-radio
            >
            <el-radio
              label="是否移除相应的整段ip(此类产品标签"
              @click="showIpPool = false"
              >是否移除相应的整段ip(此类产品标签</el-radio
            >
          </el-radio-group>

          <el-row>
            <div>
              <label style="margin-right: 20px">订单选择</label>
              <el-radio-group v-model="selectedOrder">
                <el-radio label="分段" value="true"></el-radio>
                <el-radio label="展开" value="false"></el-radio>
              </el-radio-group>
            </div>
          </el-row>
          <el-table style="width: 100%" max-height="500" row-key="id">
            <el-table-column type="selection" prop="id" label="订单id" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="country" label="国家" />
            <el-table-column prop="ip" label="涉及IP" />

            <el-table-column prop="reportReason" label="报告原因" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已操作详情">
          <el-table :data="tableDataNode" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="orderId" label="订单ID" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="country" label="国家" />
            <el-table-column prop="ip" label="涉及IP" />
            <el-table-column label="操作记录">
              <!-- <template #default="{ row }">
                <el-button @click="editNode(row)">编辑</el-button>
                <el-button @click="removeNode(row)">删除</el-button>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div v-if="showIpPool">
        <!-- <el-table :data="selectedRow" style="width: 100%">
          <el-table-column prop="ip" label="ip" />
        </el-table> -->
      </div>

      <template #footer>
        <el-button @click="solutionDialogVisible = false">取消</el-button>
        <el-button v-if="nextStepv" @click="nextStep">下一步</el-button>
        <!-- <el-button type="primary" @click="confirmSolution">确认</el-button> -->
      </template>
    </el-dialog>
    <el-dialog v-model="changeIpDialogVisible" title="更换IP" width="90%">
      <div>
        <el-row>
          <div>
            <label style="margin-right: 20px">IP池信息</label>
          </div>
        </el-row>
        <el-row>
          <el-form :inline="true" :model="searFrom">
            <el-form-item>
              <el-input
                v-model="searFrom.name"
                placeholder="国家"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searFrom.apikey"
                placeholder="api别名"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searFrom.code"
                placeholder="cidr"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="init">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="syncData">同步</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reportVis = true"
                >问题IP报告</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="repairVis = true"
                >维修站</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>

        <!-- 添加IP池表格 -->
        <el-table
          :data="ipPoolData"
          style="width: 100%"
          :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
          max-height="500"
          row-key="id"
          :tree-props="treeProps"
        >
          <!-- <el-table-column type="index" :index="indexMethod" /> -->
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="country"
            label="国家(机房所在地)"
            width="120"
          />
          <el-table-column prop="region" label="地区(机房所在地)" />
          <el-table-column prop="cidr" label="cidr" />
          <el-table-column prop="expiryDate" label="到期时间" width="150" />
          <el-table-column prop="routingPolicy" label="大陆直连" width="120">
            <template #default="{ row }">
              <el-select
                v-model="row.routingPolicy"
                placeholder="请选择"
                @change="change(row)"
              >
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="level" label="级别" width="120">
            <template #default="{ row }">
              <el-select
                v-model="row.level"
                placeholder="请选择级别"
                @change="change(row)"
              >
                <el-option label="高级" value="高级"></el-option>
                <el-option label="中级" value="中级"></el-option>
                <el-option label="初级" value="初级"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="产品名称" width="220">
            <template #default="{ row }">
              <el-select
                v-model="row.productName"
                multiple
                placeholder="请选择产品名称"
                @change="change(row)"
              >
                <el-option label="产品A" value="产品A"></el-option>
                <el-option label="产品B" value="产品B"></el-option>
                <el-option label="产品C" value="产品C"></el-option>
                <!-- 可以根据需要添加更多选项 -->
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="apikey" label="api别名" />
          <el-table-column prop="city" label="city" />
          <el-table-column prop="region" label="region" />
          <el-table-column prop="country" label="country" />

          <el-table-column label="操作" fixed="right">
            <template #default="{ row }"
              >f
              <div class="icon_content">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top-start"
                >
                  <div class="icon_box">
                    <el-icon @click="edit(row)" size="20" color="#71778d"
                      ><EditPen
                    /></el-icon>
                  </div>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top-start"
                >
                  <div class="icon_box_d">
                    <el-icon @click="remove(row)" size="20" color="#71778d"
                      ><Remove
                    /></el-icon>
                  </div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-row>
            <div>
              <label style="margin-right: 20px">需要被替换得ip</label>
            </div>
          </el-row>
          <el-table
            :data="orderData"
            style="width: 100%"
            max-height="500"
            row-key="id"
          >
            <el-table-column type="selection" prop="id" label="订单id" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="country" label="国家" />
            <el-table-column prop="ip" label="涉及IP" />
            <el-table-column prop="reportReason" label="报告原因" />
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-row>
            <div>
              <label style="margin-right: 20px">新勾选的ip</label>
            </div>
          </el-row>
          <el-table
            :data="ipPoolDataNew"
            style="width: 100%"
            :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
            max-height="500"
            row-key="id"
            :tree-props="treeProps"
          >
            <!-- <el-table-column type="index" :index="indexMethod" /> -->
            <el-table-column type="selection" width="55" />
            <el-table-column
              prop="country"
              label="国家(机房所在地)"
              width="120"
            />
            <el-table-column prop="region" label="地区(机房所在地)" />
            <el-table-column prop="cidr" label="cidr" />
            <el-table-column prop="expiryDate" label="到期时间" width="150" />
            <el-table-column prop="apikey" label="api别名" />
            <el-table-column prop="city" label="city" />
            <el-table-column prop="region" label="region" />
          </el-table>
        </el-col>
      </el-row>

      <template #footer>
        <el-button @click="changeIpDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="confirmChangeIp">完成</el-button>
      </template>
    </el-dialog>
    <!-- 测试对话框 -->
    <el-dialog v-model="testDialogVisible" title="测试结果" width="50%">
      <div v-for="(item, index) in testResults" :key="index">
        <span :style="{ color: item.color }">{{ item.type }}</span>
      </div>
      <el-button @click="testConnection(0)">测试</el-button>
      <template #footer>
        <el-button @click="testDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, computed, reactive } from "vue";
import {
  page,
  remove as apiRemove,
  saveOrUpdate,
} from "../../../api/project2/ip/ip.js";
import { ElMessage } from "element-plus";
import confirm from "../../../utils/ElMessageUtils.js";

let radio1 = ref("0");
let selectedOrder = ref("0");
let selectedNode = ref("0");

const orderData = ref([
  {
    id: "1123123124",
    productName: "产品A",
    country: "中国",
    ip: "192.168.1.1",
    reportReason: "网络不稳定",
  },
  {
    id: "1123123124",
    productName: "产品B",
    country: "美国",
    ip: "192.168.1.2",
    reportReason: "需要进一步调查",
  },
]);
// 示例数据
const exampleData = [
  {
    ip: "192.168.1.0/22",
    productTag: "标签A",
    account: "账号1",
    createTime: "2024-01-01 10:00:00",
    reportReason: "网络不稳定",
    notes: "需要进一步调查",
    currentProductStatus: "正常",
    removeSingleIp: "是",
    removeSingleIpTag: "否",
    removeIpSegment: "是",
    solution: "解决方案",
    ips: [
      { id: "1123123124", ip: "192.168.1.1", reportReason: "网络不稳定" },
      { id: "1123123124", ip: "192.168.1.2", reportReason: "需要进一步调查" },
    ],
  },
  {
    ip: "10.0.0.0/24",
    productTag: "标签B",
    account: "账号2",
    createTime: "2024-01-01 10:00:00",
    reportReason: "连接超时",
    notes: "可能是路由问题",
    ips: [
      { id: "1123123124", ip: "10.0.0.1", reportReason: "连接超时" },
      { id: "1123123124", ip: "10.0.0.2", reportReason: "可能是路由问题" },
    ],
  },
];

const tableData = ref([]);

const objectForm = ref({
  ip: "",
  productTag: "",
  reportReason: "",
  notes: "",
});

let searFrom = ref({
  pageNo: 1,
  pageSize: 10,
  account: "",
  reportReason: "",
  reportTime: null,
});

let total = ref(0);

let reportVis = ref(false);

const selectedRows = ref([]);

const handleSelectionChange = (val) => {
  selectedRows.value = val;
};

const hasSelection = computed(() => selectedRows.value.length > 0);

const init = async () => {
  try {
    // 使用示例数据
    tableData.value = exampleData;
    total.value = exampleData.length;
  } catch (error) {
    console.error("API请求失败:", error);
    ElMessage.error("无法加载数据，请稍后重试");
  }
};

const confirmAdd = async (row) => {
  const res = await saveOrUpdate(objectForm.value);
  const { code, msg } = res;
  if (code == "200") {
    ElMessage.success("操作成功");
    reportVis.value = false;
    init();
    return;
  }
  ElMessage.success(msg);
};

const removeRow = async (row) => {
  const b = await confirm("您确定要删除吗？");
  if (!b) {
    return;
  }
  const res = await apiRemove({ id: row.id });
  const { code, msg } = res;
  if (code == "200") {
    ElMessage.success("操作成功");
    init();
    return;
  }
  ElMessage.success(msg);
};

const edit = (row) => {
  objectForm.value = { ...row };
  reportVis.value = true;
};

const moveToRepairStation = (row) => {
  // 在这里实现放入维修站的逻辑
  console.log("放入维修站:", row);
};

const moveToRecycleBin = () => {
  // 在这里实现放入回收站的逻辑
  console.log("放入回收站", selectedRows.value);
};

const solutionDialogVisible = ref(false);
const selectedRow = ref(null);

const activeTab = ref("显示涉及问题节点"); // 默认选中的选项卡

const openSolutionDialog = (row) => {
  console.log(row);
  selectedRow.value = row;
  solutionDialogVisible.value = true;
};

const selectedSolution = ref([]);
const selectedIps = ref([]);

const openChat = (row) => {
  // 在这里实现打开聊天窗口的逻辑
  console.log("打开聊天窗口:", row);
};

const showIpPool = ref(false);
const ipPoolData = ref([]);
const treeProps = reactive({
  checkStrictly: false,
});
const ipPoolDataNew = ref([
  {
    id: "1",
    cidr: "192.168.0.1",
    expiryDate: "2024-06-30",
    city: "纽约",
    region: "东北",
    country: "美国s",
    apikey: "apikey-美国",
  },
  {
    id: "2",
    cidr: "192.168.0.2",
    expiryDate: "2024-06-30",
    city: "纽约",
    region: "东北",
    country: "美国",
    postal: "10001",
    timezone: "UTC-5",
    apikey: "apikey-美国",
  },
]);
// 示例数据
const exampleIpPoolData = [
  {
    id: "1",
    name: "中国",
    code: "CN",
    cidr: "192.168.0.0/24",
    expiryDate: "2024-06-30",
    routingPolicy: "跳转",
    level: "中级",
    productName: ["产品C"],
    city: "纽约",
    region: "东北",
    country: "美国",
    postal: "10001",
    timezone: "UTC-5",
    apikey: "apikey-美国",
    children: [
      {
        id: "2",
        name: "中国",
        code: "CN",
        cidr: "192.168.0.1",
        expiryDate: "2024-06-30",
        routingPolicy: "跳转",
        level: "中级",
        productName: ["产品C"],
        city: "纽约",
        region: "东北",
        country: "美国",
        postal: "10001",
        timezone: "UTC-5",
        apikey: "apikey-美国",
      },
    ],
  },
  {
    id: "3",
    name: "美国",
    code: "US",
    cidr: "10.0.0.1",
    expiryDate: "2024-06-30",
    routingPolicy: "跳转",
    level: "中级",
    productName: ["产品C"],
    city: "纽约",
    region: "东北",
    country: "美国",
    postal: "10001",
    timezone: "UTC-5",
    apikey: "apikey-美国",
  },
];

const confirmSolution = () => {
  console.log("选择的解决方案:", selectedSolution.value);
  solutionDialogVisible.value = false;
  if (selectedSolution.value.includes("更换IP")) {
    showIpPool.value = true;
    ipPoolData.value = exampleIpPoolData; // 设置示例数据
  } else {
    showIpPool.value = false;
  }
};

const tableDataNode = ref([
  {
    orderId: "1001",
    productName: "产品A",
    country: "中国",
    ip: "192.168.1.1",
    nodeGroup: "节点组1",
  },
  {
    orderId: "1002",
    productName: "产品B",
    country: "美国",
    ip: "10.0.0.1",
    nodeGroup: "节点组2",
  },
  {
    orderId: "1003",
    productName: "产品C",
    country: "日本",
    ip: "172.16.0.1",
    nodeGroup: "节点组3",
  },
  {
    orderId: "1004",
    productName: "产品D",
    country: "德国",
    ip: "192.168.2.1",
    nodeGroup: "节点组4",
  },
  {
    orderId: "1005",
    productName: "产品E",
    country: "法国",
    ip: "10.1.1.1",
    nodeGroup: "节点组5",
  },
]);

const nextStepv = ref(false);
const changeIpDialogVisible = ref(false);

const nextStep = () => {
  changeIpDialogVisible.value = true;
  showIpPool.value = true;
  ipPoolData.value = exampleIpPoolData;
  console.log("下一步操作");
};

const confirmChangeIp = () => {
  // 在这里实现确认更换IP的逻辑
  console.log("确认更换IP");
  changeIpDialogVisible.value = false;
};

const testDialogVisible = ref(false);
const testResults = ref([
  { type: "socks5", color: "black" },
  { type: "http/https", color: "black" },
]);

const openTestDialog = (ip) => {
  testDialogVisible.value = true;
  // 可以在这里使用 ip 进行其他操作
};

const testConnection = (index) => {
  // 模拟测试连接的逻辑

  testResults.value[0].color = "green"; // socks5 测试成功
  testResults.value[1].color = "green"; // http/https 测试失败
};

onBeforeMount(() => {
  init();
});
</script>

<style lang="less" scoped>
.header_right {
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
}

.header_left {
  border-radius: 15px 0px 0px 0px;
  font-weight: 800;
}

.form-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 纵向排列 */
}
</style>